<template>
	<view class="search">
		<!-- 状态栏高度 -->
		<view class="status" :style="{ height: statusHeight + 'px' }"></view>
		<!-- 自定义胶囊-导航区 -->
		<view class="search_nav" :style="{ height: capsuleHeight + 'px' }">
			<van-icon name="arrow-left" />
			<view class="search_input"><van-search placeholder="搜索服务,如:保洁服务" shape="round" /></view>
		</view>
		<!-- 搜索出来的数据列表 -->
		<view class="search_data" v-if="data.length > 0">
			<van-cell-group>
				<van-cell v-for="item in data" :key="item.id" :title="item.name" />
			</van-cell-group>
		</view>
		<!-- 热门搜索 -->
		<view class="hot_search" v-else>
			<view class="title">热门搜索</view>
			<van-row gutter="20">
				<van-col v-for="item in hots">
					<view class="hot_box">{{ item.title }}</view>
				</van-col>
			</van-row>
		</view>
	</view>
</template>

<script setup>
import { systemInfo } from '../../utils/mixins';
import { ref } from 'vue';
//状态栏和胶囊区调用混入的
const { statusHeight, capsuleHeight } = systemInfo();

//热门搜索
const hots = ref([
	{
		title: '小时工',
		path: ''
	},
	{
		title: '住家保姆',
		path: ''
	},
	{
		title: '家电维修',
		path: ''
	},
	{
		title: '沙发清洗',
		path: ''
	},
	{
		title: '小时工',
		path: ''
	},
	{
		title: '住家保姆',
		path: ''
	},
	{
		title: '家电维修',
		path: ''
	},
	{
		title: '沙发清洗',
		path: ''
	}
]);
//搜索出来的数据
const data = ref([
	{ id: 1, type: 1, name: '3小时小时工', path: '' },
	{ id: 2, type: 1, name: '6小时小时工', path: '' },
	{ id: 3, type: 1, name: '4小时小时工', path: '' },
	{ id: 4, type: 1, name: '5小时小时工', path: '' },
	{ id: 5, type: 1, name: '6小时小时工', path: '' }
]);
</script>

<style lang="scss" scoped>
.search {
	padding: 0 20rpx;
	.search_nav {
		display: flex;
		align-items: center;
		.search_input {
			width: 530rpx;
		}
	}
	.hot_search {
		.title {
			font-size: 32rpx;
			margin: 20rpx 0;
		}
		.hot_box {
			background-color: #f4f4f4;
			padding: 3px 30rpx;
			border-radius: 10rpx;
			font-size: 22rpx;
			color: #666;
			margin-bottom: 10rpx;
		}
	}
}
</style>
